<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示隐藏</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app">

</div>
</body>
</html>
<script type="text/babel">
    class Ceild extends React.Component{
constructor(props) {
    super(props);
    this.state={
        show:"block",
        text:"隐藏",
    }
}
render() {
    return <div>
        <button onClick={this.oneclick.bind(this,this.state.text)}>{this.state.text}</button>
        <br/>
        <p style={{display:this.state.show}}>我马上就没了</p>
    </div>
}
    //函数
        oneclick(a){
    if (a=="隐藏"){
        this.setState({show:"none",
            text:"显示"})
    }else {
        this.setState({
            show:"block",
            text:"隐藏",})
    }

        }
    }
    ReactDOM.render(<Ceild/>,app);
</script>